<style lang="less">
    @import './menu.less';
</style>

<template>
    <div style="background: #495060" class="ivu-shrinkable-menu">
        <slot name="top"></slot>
        <sidebar-menu
          v-show="!shrink"
            :menu-list="menuList"
            :open-names="openNames"
            @on-change="handleChange"
        ></sidebar-menu>
      <sidebar-menu-shrink
        v-show="shrink"
        :menu-list="menuList"
        @on-change="handleChange"
      ></sidebar-menu-shrink>
    </div>
</template>

<script>
import sidebarMenu from './components/sidebarMenu.vue';
import sidebarMenuShrink from './components/sidebarMenuShrink.vue';
export default {
    name: 'shrinkableMenu',
    inject:['reload'],
    components: {
        sidebarMenu,
        sidebarMenuShrink
    },
    props: {
        menuList: {
            type: Array,
            required: true
        },
        beforePush: {
            type: Function
        },
        openNames: {
            type: Array
        },
        shrink: {
          type: Boolean,
          default: false
        },
    },
    methods: {
        handleChange (name) {
            let willpush = true;
            if (this.beforePush !== undefined) {
                if (!this.beforePush(name)) {
                    willpush = false;
                }
            }
            if (willpush) {
                if(this.$route.name===name){
                    this.reload();
                }else{
                    this.$router.push({
                        name: name
                    });
                }
            }
            this.$emit('on-change', name);
        }
    }
};
</script>
